<!DOCTYPE html>
<html>
<meta charset="UTF-8" />
<title>React的props</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
     <div id = "example"></div>
	<script type="text/babel">
  
  /**1.定义组件类**/
  class Message extends React.Component{
    render(){
       return(
         <div>
          <h1> 姓名：{this.props.name}</h1>
         <h2> 手机号码：{this.props.phone}</h2>
         <h3> 网址：{this.props.url}</h3>
         </div>
         
       );
   }
  }   
   
   /**2.设置默认值**/
   Message.defaultProps = {
       name : '刘子彬',
       phone : '18358034412',
       url : 'www.baidu.com'
   }

   /**3.定义组件**/
   const element = <Message/>

  /**4.渲染**/
  ReactDOM.render(
    element,
    document.getElementById('example')
  );


	</script>
</body>
</html>